<template>
	<div class="pannel-wrapper">

		<div class="pannel-item">
			<span class="label">标记选择: </span>
			<a-select v-model='pageState.indicate' mode="tags" @change='handleIndicateChange' style="width: 300px"
				placeholder='请选择' showSearch allowClear>
				<a-select-option :value='item.value' v-for='item in list' :key='item.value' :disabled="item.disabled">
					{{ item.label }}
				</a-select-option>
			</a-select>
		</div>

		<div class="pannel-item">
			<span class="label">热图选择: </span>
			<a-radio-group name="type" v-model="pageState.hotType" @change="typeChange">
				<a-radio :value="1">热力图</a-radio>
				<a-radio :value="2">点状图</a-radio>
			</a-radio-group>
		</div>

		<div class="pannel-item">
			<a-select v-model="aoiId" placeholder="请输入地点名称模糊匹配" :filter-option="false" show-search style="width: 400px"
				@search="fetchUser" @change="handleChange" allowClear>
				<a-spin v-if="fetching" slot="notFoundContent" size="small" />
				<a-select-option v-for="it in data" :key="it.value">{{ it.label }}</a-select-option>
			</a-select>
		</div>

		<div class="pannel-item business-item">
			<a-collapse v-model="activeKey">
				<a-collapse-panel key="1" header="商圈榜单">
					<a-table :columns='columns' :data-source='pageState.businessData' :scroll="{ y: 400 }" size='middle'
						:loading="pageState.businessLoading" :pagination="false" :rowKey="(e, i) => i">
						<template slot="fenceName" slot-scope="fenceName, row">
							<a-button type="link" @click="findBusinessAoi(row)" class="name">
								{{ fenceName }}
							</a-button>
						</template>
					</a-table>
				</a-collapse-panel>
			</a-collapse>

		</div>
	</div>
</template>

<script>
import { debounce } from 'lodash'
import UrbanService from "@/service/urban-map.service"
import { CoreIndicateOption } from "@/model/city-map.enum.js"

export default {
	name: 'pannel',
	data() {
		this.fetchUser = debounce(this.fetchUser.bind(this), 500)
		return {
			activeKey: 1,
			list: CoreIndicateOption.map(e => {
				return {
					...e,
					disabled: false
				}
			}),
			type: 1,
			fetching: false,
			data: [],
			aoiId: '',
			columns: [
				{
					title: '商圈名称',
					dataIndex: 'fenceName',
					key: 'fenceName',
					scopedSlots: { customRender: 'fenceName' },
				},
				{ title: '数量', dataIndex: 'num', key: 'num', ellipsis: true }
			],
			pagination: { hideOnSinglePage: true },
		}
	},

	props: {
		pageState: {
			type: Object,
			default: () => ({})
		}
	},

	methods: {
		findBusinessAoi(row) {
			console.log('点击行', row);
			console.log('多边形数据', this.pageState.polygonPath);
			const selectedPoly = this.pageState.polygonPath.find(item => {
				return item.aoi_id == row.aoiId
			});
			if (!selectedPoly) {
				console.log('没找到');
				return;
			}
			const centerGis = selectedPoly.path[0];
			this.$emit("setCenter", centerGis);
			this.$emit("setMapZoom", 16); // 取值待商榷
			this.$emit("setSelected", selectedPoly);
		},

		typeChange() {
			this.$emit('hotTypeChange', this.hotType);
		},

		handleIndicateChange() {
			const overlen = this.pageState.indicate.length >= 2;
			this.list.map(item => {
				item.disabled = overlen && !this.pageState.indicate.includes(item.value);
			})
			this.$emit('indicateChange', this.pageState.indicate);
		},

		// parent use
		setIndicateValue(indicator) {
			this.pageState.indicate = indicator;
		},

		handleChange(value) {
			if (!value) { // 清空输入框
				this.$emit("setSelected", {});
				return;
			}
			const selectedPoly = this.pageState.polygonPath.find(item => {
				return item.uuid == value;
			});
			if (!selectedPoly) {
				return;
			}
			const centerGis = selectedPoly.path[0];
			this.$emit("setCenter", centerGis);
			this.$emit("setMapZoom", 16); // 取值待商榷
			this.$emit("setSelected", selectedPoly);

		},

		handleTableChange(pagination, filters, sorter) {
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			this.pagination = pager;
			this.fetch({
				results: pagination.pageSize,
				page: pagination.current,
				sortField: sorter.field,
				sortOrder: sorter.order,
				...filters,
			});
		},

		async fetchUser(value) {
			if (!value) {
				return
			}
			this.data = []
			this.fetching = true
			const params = {
				provName: this.pageState.searchForm.provName,
				cityName: this.pageState.searchForm.cityName,
				countyName: this.pageState.searchForm.countyName,
				keyword: value,
			}
			try {
				const data = await UrbanService.searchAoi(params)
				let users = data || [];
				users = users.map(user => ({
					label: `${user.fence_name}`,
					value: user.uuid.toString()
				}))
				this.data = users
			} catch (error) {
				console.log(error);
			} finally {
				this.fetching = false
			}
		},
	}
}

</script>
<style scoped>
.pannel-wrapper {
	position: absolute;
	top: 24px;
	width: 100%;
	padding: 8px;
	padding-right: 24px;
	display: flex;
	align-items: baseline;
	background-color: transparent;
	pointer-events: none;
}

.pannel-item {
	background-color: #fff;
	margin-left: 20px;
	border-radius: 4px;
	min-height: 40px;
	line-height: 40px;
	padding: 0 8px;
	pointer-events: auto;
}

.business-item {
	width: 400px;
	margin-left: auto;
	padding: 0 !important;
}


.tittle {
	font-size: 18px;
	font-weight: bold;
}

.label {
	margin-right: 4px;
}

/deep/.name>span {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
